<template>
  <div ref="container" class="water-container"></div>
</template>

<script>
import { createApp } from "vue";
import * as THREE from "three";

export default {
  mounted() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.z = 5;

    // 创建金属球的材质
    const metalMaterial = new THREE.MeshStandardMaterial({
      color: 0xc0c0c0, // 灰色的十六进制值
      metalness: 1,
      roughness: 0.2,
    });

    // 创建金属球的几何体
    const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);

    // 创建金属球的网格对象
    const sphereMesh = new THREE.Mesh(sphereGeometry, metalMaterial);

    scene.add(sphereMesh);

    // 创建平行光源
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(1, 1, 1);
    scene.add(light);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff);
    document.body.appendChild(renderer.domElement);

    function animate() {
      requestAnimationFrame(animate);

      // 旋转金属球
      sphereMesh.rotation.x += 0.01;
      sphereMesh.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();
  },
};
</script>

<style>
.water-container {
  width: 100%;
  height: 100vh;
}
</style>
